<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<!-- 基础样式 -->
		<link type="text/css" rel="stylesheet" href="/static/css/base.css"/>
		<!-- 公共样式 -->
		<link type="text/css" rel="stylesheet" href="/static/css/common.css" />
		<!-- 商品样式 -->
		<link type="text/css" rel="stylesheet" href="/static/css/register.css" />
		<!-- 引入favicon图标 -->
		<link rel="shortcut icon" href="/static/img/favicon.ico" />
		<!-- layui -->
		<link rel="stylesheet" href="/static/js/layui/css/layui.css" media="all">

		<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js" crossorigin="anonymous"></script>

		<script src="/static/js/axios.min.js"></script>
	</head>
	<body>
		<!-- 快捷导航模块 start -->
		<section class="shortcut">
			<!-- 版心 -->
			<div class="w">
				<div class="nav_left">
					<ul>
						<li class="icon-phone">0797-3591053</li>
						<li></li>
						<li class="icon-app"><a href="#">下载Flower鲜花APP</a></li>
						<li></li>
						<li class="icon-wx"><a href="#">关注Flower鲜花微信公众号</a></li>
					</ul>
				</div>

				<div class="nav_right">
					<ul>
						<li class="login"><a href="/login.html">登录</a></li>
						<li><a href="/register.html">注册</a></li>
						<li></li>
						<li class="shop_car"><a href="/shopCar.html">我的购物车</a><i class="count">0</i></li>
					</ul>
				</div>
			</div>
		</section>
		<!-- 快捷导航模块 end -->

		<!-- header头部模块 start -->
		<header class="header w">
			<!-- logo -->
			<div class="logo">
				<ul>
					<li>
						<h1>
							<a href="/index.html" title="Flower" class="Rosewin">Flower</a>
						</h1>
					</li>
					<li></li>
					<li class="arrow-icon"><a href="#">全国</a></li>
				</ul>
			</div>
			<!-- 搜索框 -->
			<div class="search">
				<input type="text" name="" id="" value="" 	placeholder="请输入关键字"/>
				<button><em></em></button>
			</div>
			<!-- 下载 -->
			<div class="download">
				<a href="#" class="ios"></a>
				<a href="#" class="android"></a>
			</div>
		</header>
		<!-- header头部模块 end -->

		<!--移入弹出层-->
		<div class="shiftInPopup">
			<ul class="kind" id="kind">
				<li><a href="/flower.html?categoryName=向日葵">向日葵</a></li>
				<li><a href="/flower.html?categoryName=康乃馨">康乃馨</a></li>
				<li><a href="/flower.html?categoryName=满天星">满天星</a></li>
				<li><a href="/flower.html?categoryName=白玫瑰">白玫瑰</a></li>
				<li><a href="/flower.html?categoryName=红玫瑰">红玫瑰</a></li>
				<li><a href="/flower.html?categoryName=蓝玫瑰">蓝玫瑰</a></li>
				<li><a href="/flower.html?categoryName=粉玫瑰">粉玫瑰</a></li>
			</ul>
		</div>

		<!-- nav 模块 start -->
		<nav class="nav">
			<div class="w">
				<div class="category">
					<ul>
						<li><a href="/index.html">首页</a></li>
						<li>/</li>
						<li><a href="http://localhost:8099/flower.html?categoryName=鲜花" class="selectFlower" id="flower">鲜花</a></li>
						<li>/</li>
						<li><a href="/flower.html?categoryName=进口鲜花">进口鲜花</a></li>
						<li>/</li>
						<li><a href="/cake.html?categoryName=蛋糕" class="cake">蛋糕<img src="/static/img/hot_ico3.gif" alt=""></a></li>
						<li>/</li>
						<li><a href="/flower.html?categoryName=永生花">永生花</a></li>
						<li>/</li>
						<li><a href="#">开业花篮</a></li>
						<li>/</li>
						<li><a href="#">礼品</a></li>
						<li>/</li>
						<li><a href="#">鲜花百科</a></li>
						<li>/</li>
						<li><a href="#">花语大全</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- nav 模块 end -->


		<div class="main">
			<div class="w">
				<div class="register">
					<form class="layui-form" action="/register" method="post">
						<ul>
							<li><a>注册</a></li>
							<li><input type="text" name="username" placeholder="请输入用户名" lay-verify="required|title" autocomplete="off" id="username"/></li>
							<li><input type="text" name="mobile" placeholder="请输入电话" lay-verify="required|phone" autocomplete="off" id="mobile"/></li>
							<li><input type="text" name="code" placeholder="请输入验证码" lay-verify="required|number" autocomplete="off" id="code"/><a id="getCode">获取验证码</a></li>
							<li><input type="password" name="password" placeholder="请输入密码" lay-verify="required|password" autocomplete="off" id="password"/></li>
							<li><input type="password" name="affirm_password" placeholder="确认密码" lay-verify="required|password" autocomplete="off" id="affirm_password" /></li>
							<li><a><input class="layui-btn" type="submit" value="注&nbsp;&nbsp;&nbsp;册" id="register"/></a></li>
							<div id="popup"></div>
							<li>忘记密码?</li>
						</ul>
					</form>
				</div>
			</div>
		</div>






		<!-- footer 模块 start -->
		<footer class="footer">
			<div class="footer_service footer-wrap">
					<div class="w">
						<ul>
							<li>
								<h4></h4>
								<div class="service_text">
									<h2>高档花材</h2>
									<p>100%品质保证</p>
								</div>
							</li>
							<li>
								<h4></h4>
								<div class="service_text">
									<h2>同城配送</h2>
									<p>1-3小时送达</p>
								</div>
							</li>
							<li>
								<h4></h4>
								<div class="service_text">
									<h2>特色服务</h2>
									<p>高端私人定制</p>
								</div>
							</li>
							<li>
								<h4></h4>
								<div class="service_text">
									<h2>时尚原创花艺</h2>
									<p>资深花艺师独家设计</p>
								</div>
							</li>
						</ul>
					</div>
			</div>

			<div class="footer_bottom">
				<div class="w">
					<div class="help">
						<div class="footer_help">
							<dl>
								<dt>购物说明</dt>
								<dd><a href="#">APP专享介绍</a></dd>
								<dd><a href="#">购物流程</a></dd>
								<dd><a href="#">支付说明</a></dd>
							</dl>
							<dl>
								<dt>配送说明</dt>
								<dd><a href="#">配送范围</a></dd>
								<dd><a href="#">配送费用</a></dd>
								<dd><a href="#">配送时间</a></dd>
								</dl>
							<dl>
								<dt>退改须知</dt>
								<dd><a href="#">订单修改</a></dd>
								<dd><a href="#">订单取消</a></dd>
								<dd><a href="#">关于签收</a></dd>
							</dl>
							<dl>
								<dt>关于我们</dt>
								<dd><a href="#">品牌介绍</a></dd>
								<dd><a href="#">实力证明</a></dd>
								<dd><a href="#">花语大全</a></dd>
								<dd><a href="#">鲜花百科</a></dd>
							</dl>
							<dl>
								<dt>同层配送</dt>
								<dd><a href="#">北京鲜花</a></dd>
								<dd><a href="#">上海鲜花</a></dd>
								<dd><a href="#">广州鲜花</a></dd>
								<dd><a href="#">更多城市</a></dd>
							</dl>
						</div>
						<div>&nbsp;&nbsp;友情链接：&nbsp;&nbsp;<a href="#">订花</a>&nbsp;&nbsp;<a href="#">花店订花</a>&nbsp;&nbsp;<a href="#">防伪</a>&nbsp;&nbsp;<a href="#">网站建设</a>&nbsp;&nbsp;<a href="#">连锁加盟网</a>&nbsp;<a href="#">CFA</a>&nbsp;&nbsp;<a href="#">品牌大全</a>&nbsp;&nbsp;<a href="#">EMBA</a>&nbsp;&nbsp;<a href="#">资源网</a></div>
						<div>&nbsp;&nbsp;联系电话：&nbsp;&nbsp;028-64181805&nbsp;&nbsp;&nbsp;©2021 - 2022 By 赖赐麒</div>
						<div>&nbsp;&nbsp;开发者：赖赐麒&nbsp;&nbsp;&nbsp;<a href="#">应用权限</a>&nbsp;&nbsp;<a href="#">隐私权限</a></div>
					</div>


					<div class="service_tel">
						<ul>
							<li>电话</li>
							<li>0797-3591053</li>
							<li>工作日 08:00-21:00</li>
							<li>节假日 06:00-24:00</li>
							<li><a href="#">全国</a></li>
						</ul>
					</div>


					<div class="download">
						<ul class="download_iphone">
							<li>Iphone下载</li>
							<li></li>
						</ul>
						<ul class="download_android">
							<li>Android下载</li>
							<li></li>
						</ul>
						<div>手机扫码即可下载Flower鲜花APP</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- footer 模块 end -->
		<script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/js/layui/jquery.min.js"></script>
		<script src="/static/js/layui/layui.js"></script>
		<script src="/static/js/common.js"></script>
		<script>

			layui.use(['form', 'layer'], function(){
				var form = layui.form
						,layer = layui.layer
						,$ = layui.$;

				//自定义验证规则
				form.verify({
					title: function(value){
						if(value.length < 3){
							return '用户名必须大于3个字符';
						}
					}
					,password: [
						/^[\S]{6,18}$/
						,'密码必须6到18位，且不能出现空格'
					]

				});

				/*$("#register").click(function () {
					let username = $("#username").val();
					let mobile = $("#mobile").val();
					let code = $("#code").val();
					let password = $("#password").val();
					let affirm_password = $("#affirm_password").val();
					let data = {"username": username,"mobile": mobile,"code": code,"password": password}
					if(affirm_password != password){
						layer.open({
									title: '错误',
									content: '两次密码填写不一致'
						})
					}else{
						sendPostHttp("/register",data)
						.then(function (response) {
							console.log(response);
							console.log(成功);
						}).catch(function (response) {
							layer.open({
								title: "信息",
								content: response
							})
						})
					}

				})*/


				var popup = _dx.Captcha(document.getElementById('popup'), {
					appId: 'dc24f83a07da5eee47abce103d68e1bc', //appId，在控制台应用管理或应用配置模块获取
					style: 'popup',
					apiServer: 'http://vip6.dingxiang-inc.com',
					// apiServer域名地址在控制台页面->无感验证->应用管页面左上角获取，必须填写完整包括https://。
					success: function (token) {
						console.log('token:', token)
						// 获取验证码token，用于后端校验，注意获取token若是sl开头的字符串，则是前端网络不通生成的降级token,请检查前端网络及apiServer地址。
						//1、给指定手机号发送验证码
						//2、倒计时
						if ($("#getCode").hasClass("disable")) {
							//正在倒计时
						} else {
							let mobile = $("#mobile").val();
							$.ajax({
								url: "http://localhost:8099/thirdParty/sms/sendVerificationCode",    //请求的url地址
								dataType: "json",   //返回格式为json
								async: true,//请求是否异步，默认为异步，这也是ajax重要特性
								contentType: "application/json; charset=utf-8",
								data: JSON.stringify({"mobile": mobile,"token":token}),//参数值
								type: "post",   //请求方式
								success: function (result) {
									if(result.code == 0){
										//请求成功时处理
										layer.open({
											title: '信息'
											,content: '验证码发送成功'
										})
									}else{
										layer.open({
											title: '信息'
											,content: '验证码发送失败'
										})
									}

								}
							})
							timeoutChangeStyle();
						}
					}
				})
				document.getElementById('getCode').onclick = function () {
					popup.show()
				}


			});
			var num = 60;
			function timeoutChangeStyle() {
				$("#getCode").attr("class", "disable");
				if (num == 0) {
					$("#getCode").text("发送验证码");
					num = 60;
					$("#getCode").attr("class", "");
				} else {
					var str = num + "s后再次发送";
					$("#getCode").text(str);
					//递归调用让时间减少
					//setInterval("timeoutChangeStyle()",1000);
					setTimeout("timeoutChangeStyle()", 1000);
				}
				num--;
			}
		</script>
	</body>
</html>
